<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript">
      <!-- rem单位基准声明 -->
      var designWidth = 375, maxWidth = 500, bodyFontSize = 14, baseFontSize = 100
      _setBaseFontSize()
      _setBodyFontSize()
      _setReCalcRem()

      // 设置文档默认字体
      function _setBodyFontSize () {
        if (document.body) document.body.style.fontSize = bodyFontSize + 'px'
        else document.addEventListener('DOMContentLoaded', _setBodyFontSize, false)
      }

      // 设置REM基准字号 1rem = 设计图尺寸 / 屏幕dpr / 基准字号
      function _setBaseFontSize () {
        var clientWidth = document.documentElement.clientWidth
        var rem = baseFontSize * (clientWidth > maxWidth ? maxWidth : clientWidth) / designWidth
        document.documentElement.style.fontSize = rem + 'px'
      }

      // 设置屏幕尺寸变化事件代理, 重新计算REM基准尺寸
      function _setReCalcRem () {
        document.addEventListener('DOMContentLoaded', _setBaseFontSize, false)
        window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', _setBaseFontSize, false)
      }
    </script>
    <title>Qkids久趣课时全面升级</title>
    <link href="https://static-app.97kid.com/site-student/public/css/mobile/mobile.css?v={{config('app.version')}}" rel="stylesheet" type="text/css">
    <link href="https://static-app.97kid.com/site-student/public/mobile/campaign/upgrade/css/upgrade.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">
    <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.2/weui.min.js"></script>
    <script type="text/javascript" src="https://static-app.97kid.com/wx/js/zepto.min.js"></script>
    <script type="text/javascript" src="https://static-app.97kid.com/site-student/public/js/mobile/Zepto_fx_methods.js"></script>
</head>
<body>
<div class="content">
    <div class="banner">
        <img src="https://static-app.97kid.com/site-student/public/mobile/campaign/upgrade/img/banner.png">
    </div>
    <div class="user-info">
        <div class="avatar">
            <img id="avatar"
                 src="https://static-app.97kid.com/site-student/public/mobile/campaign/upgrade/img/avatar.png">
        </div>
        <div class="info">
            <span id="nickname"></span><br/>
            <span id="mobile"></span>
        </div>
        <div id="switch-account" class="account">切换账号</div>
    </div>
    <div class="before-upgrade">
        <div class="title">
            <icon></icon>
            <title>当前课时账户</title>
        </div>
        <div class="six-class">
            <div class="class-title">
                <title>六人班</title>
            </div>
            <div class="total-time">剩<span id="total-bill-gif-lessons-left-1">0</span>课时</div>
            <div class="class-time">
                <div class="li border-bottom">
                    <icon></icon>
                    <div>
                        <span class="left">购买课时</span>
                        <span class="right"><span id="total-bill-lessons-left">0</span>课时</span>
                    </div>
                </div>
                <div class="li">
                    <icon></icon>
                    <div>
                        <span class="left">赠送课时</span>
                        <span class="right"><span id="total-gift-lessons-left">0</span>课时</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="upgrade">
        <img src="https://static-app.97kid.com/site-student/public/mobile/campaign/upgrade/icon/ic_upgrade.png">
        <div>升级后</div>
    </div>
    <div class="after-upgrade" id="after-upgrade">
        <img class="overflow" src="https://static-app.97kid.com/site-student/public/mobile/campaign/upgrade/img/overflow.png">
        <div class="title">
            <icon></icon>
            <title>现金账户</title>
        </div>
        <div id="four-class" class="four-class">
            <div class="class-title">
                <title>四人班</title>
            </div>
            <div class="total-time">共<span id="total-bill-gif-lessons-left-2">0</span>次课</div>
            <div class="class-time">
                <div class="li border-bottom">
                    <icon></icon>
                    <div class="item">
                        <span class="left">现金余额</span>
                        <span class="right">
            ¥<span id="total-cash-amount">0</span>
            (<span id="total-cash-lessons">0</span>次四人班）
          </span>
                    </div>
                </div>
                <div id="vip-card"></div>
                <div class="li">
                    <icon></icon>
                  <div class="item">
                    <span class="left">课券</span>
                    <span class="right" style="display: inline-block;width: 1.6rem;text-align: right;margin-right: 0.1rem;">
                      <span class="title">四人班</span><span class="money">抵用</span> ×<span id="total-gift-coupon">0</span>
                    </span>
                  </div>
                </div>
            </div>
        </div>
    </div>
    <div class="upgrade-btn" id="upgrade-btn">
        <button>立即免费升级</button>
    </div>
    <div class="upgrade-rule">
        <h3>升级活动说明</h3>
        <div class="sub-title">
            <icon></icon>
            <title>现金余额</title>
        </div>
        <div class="rule-content">
            指扣除已经消耗的课时费后，剩余的金额。
        </div>
        <div class="sub-title">
            <icon></icon>
            <title>蓝卡会员</title>
        </div>
        <div class="rule-content">
            Qkids久趣会员标识，约课可享有蓝卡价：四人班35元/次，二人班65元/次。<br/>
            原购买长期课的老用户升级后自动获得蓝卡，蓝卡期限 = (剩余金额/1600) x 6个月。
        </div>
        <div class="sub-title">
            <icon></icon>
            <title>课券</title>
        </div>
        <div class="rule-content">
            可直接用于预约上课。<br/>
            升级后，如使用现金余额可上四人班的次数 < 原六人班课时，则使用课券来补足次数，确保升级后，可上四人班的次数 = 原六人班课时。<br>
            如产生退费，其对应的实际金额为0。
        </div>
        <div class="sub-title">
            <icon></icon>
            <title>新手卡</title>
        </div>
        <div class="rule-content">
            Qkids久趣新手标识，约课可享有新手价：四人班25元/次，限四次；二人班50元/次，限两次。<br/>
            原购买的100元/4课时的用户升级后自动获得新手卡，已使用部分将按比例扣除。
        </div>
    </div>
    <div id="upgrade-comfirm" style="display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__hd"><strong class="weui-dialog__title">提示</strong></div>
            <div class="weui-dialog__bd">请与客服联系，详细了解后再选择是否升级。</div>
            <div class="weui-dialog__ft">
                <a id="upgrade" href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
            </div>
        </div>
    </div>
    <div id="upgrade-result" style="display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__hd"><strong class="weui-dialog__title">提示</strong></div>
            <div class="weui-dialog__bd">升级成功</div>
            <div class="weui-dialog__ft">
                <a href="javascript:;" class="cancel weui-dialog__btn weui-dialog__btn_primary">确定</a>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="https://static-app.97kid.com/site-student/public/js/mobile/login.js"></script>
<script>
  Date.prototype.format = function (fmt) {
    var o = {
      'M+': this.getMonth() + 1, //月份
      'd+': this.getDate(), //日
      'h+': this.getHours(), //小时
      'm+': this.getMinutes(), //分
      's+': this.getSeconds(), //秒
      'q+': Math.floor((this.getMonth() + 3) / 3), //季度
      'S': this.getMilliseconds() //毫秒
    }
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '')
        .substr(4 - RegExp.$1.length))
    }
    for (var k in o) {
      if (new RegExp('(' + k + ')').test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
      }
    }
    return fmt
  }
  $(document).ready(function () {
    $('.content').css('margin-left', 'calc(50% - ' + ($('.content').width() / 2) + 'px)')

    var token = utils.getUrlParam('token');
    var openId = utils.getUrlParam('openId');
    if (token) {
      window.localStorage.setItem('QKidsAccess', JSON.stringify({
        access_token: token,
        expire_at: 9999999999
      }));
      window.localStorage.setItem('QKidsOpenId', openId || 'wxxOpenId');
      $('#switch-account').css('display', 'none')
    }

    var account = new Account({
      closeBtn: false,
      loginFirst: true
    })
    initData()

    $('#switch-account').off('click').on('click', function () {
      $('.account-mask').fadeOut()
      switchAccount()
    })

    $('#upgrade-btn').off('click').on('click', function () {
      $('#upgrade-comfirm').css('display', 'block');
    })
    $('.cancel, #upgrade').off('click').on('click', function () {
      $('#upgrade-comfirm').css('display', 'none');
      $('#upgrade-result').css('display', 'none');
    })

    function switchAccount () {
      var accessString = window.localStorage.getItem(account.accessKey)
      if (accessString) {
        account.ajax({
          type: 'DELETE',
          path: '/s/user/social/wx-jqfx',
          async: false
        })
      }
      window.localStorage.removeItem(account.accessKey)
      account._showLogin(function (err, user) {
        if (!err) {
          initData()
        }
      }, true)
    }

    function initData () {
      account.getUserInfo(function (err, user) {
        if (!err) {
          if (user.billingVersion) {
            $('#alter-text').html("您已升级。");
          }
          if (user.headerSmall) document.getElementById('avatar').src = user.headerSmall
          else document.getElementById('avatar').src = 'https://static-app.97kid.com/site-student/public/mobile/campaign/upgrade/img/avatar.png'
          $('#nickname').text(user.nickname)
          $('#mobile').text(user.mobile)
          account.ajax({
            type: 'GET',
            path: '/s/my/products/migrations',
            success: function (data) {
              $('#total-bill-lessons-left').text(data.totalBillLessonsLeft)
              $('#total-gift-lessons-left').text(data.totalGiftLessonsLeft)
              $('#total-cash-amount').text(data.totalCashAmount)
              $('#total-bill-gif-lessons-left-1').text(data.totalBillLessonsLeft + data.totalGiftLessonsLeft)
              $('#total-bill-gif-lessons-left-2').text(data.totalCashLessons + data.totalGiftCoupon)
              $('#total-cash-lessons').text(data.totalCashLessons)
              $('#total-gift-coupon').text(data.totalGiftCoupon)
              $('#save').text((data.totalBillLessonsLeft + data.totalGiftLessonsLeft) * 20)

              $('#vip-card').empty()
              $('#four-class').css('height', (1.85 + data.vipCards.length * 0.525) + 'rem')
              $('#after-upgrade').css('margin-bottom', (1.1 + data.vipCards.length * 0.525) + 'rem')
              for (var i = 0; i < data.vipCards.length; i++) {
                var vipCard = data.vipCards[i]
                $('#vip-card').append(
                  '<div class="li border-bottom">' +
                  '<icon style="margin-right: 0.05rem;"></icon>' +
                  '<div class="item">' +
                  '<span class="left">' + vipCard.name + '</span>' +
                  '<span class="right">有效期至' + new Date(vipCard.validityEnd * 1000).format('20﻿yy年M月d日') + '</span>' +
                  '</div>' +
                  '</div>'
                )
              }
            },
            error: function (err) {
              $.toastAlert(err.message, 2)
            }
          })
        }
      })
    }
  })
</script>
</body>
</html>